<template>
  <div id="appAdmin">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 版本控制 start -->
    <el-card id="version-control">
      <div class="card-title">{{ tApp.appName }}</div>
      <span class="app-version">当前版本：</span>
      <el-input
        class="version-input"
        v-model="tApp.version"
        placeholder="请输入版本号"
        @input="currentVersionInputChange()"
      ></el-input>
      <el-button
        :class="versionBtnActive ? 'version-button-active' : 'version-button'"
        @click="changeCurrentVersion()"
        >确认修改</el-button
      >
    </el-card>
    <!-- 版本控制 end -->

    <!-- 列表 start -->
    <el-card style="margin-top: 20px;">
      <div class="card-title">应用内APP</div>

      <!-- 已添加 -->
      <div class="app_list">
        <div class="title_detail">
          已添加APP
          <div>
            <el-button
              class="able-button"
              size="medium"
              @click="startApp()"
              v-if="!activeApp.enabled"
            >
              启用
            </el-button>
            <el-button
              class="forbidden-button"
              size="medium"
              @click="banApp()"
              v-else
            >
              禁用
            </el-button>
            <el-button
              class="add-button"
              size="medium"
              @click="addAppDialog = true"
            >
              新增
            </el-button>
          </div>
        </div>
        <div>
          <ul class="list" style="height: 670px;position:relative;">
            <div
              v-for="(item, index) in appList"
              :key="item.id"
              style="display:flex"
              v-show="item.id !== 1"
            >
              <el-checkbox
                class="checkBox"
                v-model="appCheckBox[index]"
              ></el-checkbox>
              <li
                style="position: relative; width: 100%; height: 70px"
                :class="currentItemIndex === index ? 'current' : ''"
                @click="appMissionsClick(item, index)"
              >
                <div>
                  <span class="title">{{ item.appName }}</span>
                  <span
                    class="title1"
                    :style="
                      currentItemIndex === index
                        ? 'color: #ffffff'
                        : 'color: #1A1A1A'
                    "
                    v-if="item.enabled"
                    >启用</span
                  >
                  <span
                    class="title1"
                    style="color: #FF4F4F"
                    v-else-if="!item.enabled"
                    >禁用</span
                  >
                </div>
                <div
                  id="currentModifyIcon"
                  v-if="currentItemIndex === index"
                  style="position: absolute; right: 16px; top: 22px"
                  @click="modifyBtnClick(item)"
                >
                  <i class="el-icon-edit"></i>
                </div>
                <div
                  id="modifyIcon"
                  v-else
                  style="position: absolute; right: 16px; top: 22px"
                  @click="modifyBtnClick(item)"
                >
                  <i class="el-icon-edit"></i>
                </div>
              </li>
            </div>
            <li v-if="appList.length === 0" class="list-nodata">
              <div class="title">暂无数据</div>
            </li>
          </ul>
        </div>
        <div style="position: absolute;bottom: 10px">
          <el-pagination
            :page-size="9"
            :pager-count="5"
            layout="total, prev, pager, next"
            :total="appTotal - 1"
            @prev-click="paginationPrevClick"
            @next-click="paginationNextClick"
            @current-change="paginationNextChange"
          ></el-pagination>
        </div>
      </div>

      <!-- 任务内容 -->
      <div class="mission-content">
        <div class="title_detail">
          任务内容
          <el-button
            class="add-button"
            size="medium"
            @click="addMissionDialog = true"
          >
            新增
          </el-button>
        </div>
        <div style="padding: 0 20px" v-if="missionList.length !== 0">
          <el-tabs v-model="activeMissionName" @tab-click="isChanging">
            <el-tab-pane
              v-for="(item, index) in missionList"
              :label="item.taskName"
              :name="(index + 1).toString()"
              :key="item.id"
            >
              <div style="color: #1A1A1A; font-size: 14px;">
                所需任务参数
              </div>
              <div style="margin-top: 18px;">
                <el-checkbox
                  label="选择账号"
                  style=" color: #1A1A1A; font-size: 12px;"
                  :checked="missionList[index].isAccount"
                  @change="
                    missionList[index].isAccount = !missionList[index].isAccount
                  "
                ></el-checkbox>
              </div>
              <div style="margin-top: 18px; ">
                <el-checkbox
                  label="选择话术"
                  style=" color: #1A1A1A; font-size: 12px;"
                  :checked="missionList[index].isWords"
                  @change="
                    missionList[index].isWords = !missionList[index].isWords
                  "
                ></el-checkbox>
              </div>
              <div style="margin-top: 18px; ">
                <el-checkbox
                  label="输入关键字"
                  style=" color: #1A1A1A; font-size: 12px;"
                  :checked="missionList[index].isKeyword"
                  @change="
                    missionList[index].isKeyword = !missionList[index].isKeyword
                  "
                ></el-checkbox>
              </div>
              <div style="margin-top: 18px; ">
                <el-checkbox
                  label="选择通讯录"
                  style=" color: #1A1A1A; font-size: 12px;"
                  :checked="missionList[index].isMail"
                  @change="
                    missionList[index].isMail = !missionList[index].isMail
                  "
                ></el-checkbox>
              </div>
              <div style="margin-top: 18px; ">
                <el-checkbox
                  label="设置粉丝数"
                  style=" color: #1A1A1A; font-size: 12px;"
                  :checked="missionList[index].searchAccount"
                  @change="
                    missionList[index].searchAccount = !missionList[index].searchAccount
                  "
                ></el-checkbox>
              </div>
              <div style="margin-top: 18px; ">
                <el-checkbox
                  label="直播间参数"
                  style=" color: #1A1A1A; font-size: 12px;"
                  :checked="missionList[index].liveForm"
                  @change="
                    missionList[index].liveForm = !missionList[index].liveForm
                  "
                ></el-checkbox>
              </div>
              <div style="margin-top: 18px; ">
                <el-checkbox
                  label="发布"
                  style=" color: #1A1A1A; font-size: 12px;"
                  :checked="missionList[index].isPublish"
                  @change="
                    missionList[index].isPublish = !missionList[index].isPublish
                  "
                ></el-checkbox>
              </div>
              <div style="border: 1px solid red;margin-top: 10px;padding-bottom: 10px">
                <div style="margin-top: 10px;color: indianred;margin-left: 10px">云手机</div>
                <div style="margin-top: 20px; ">
                  <span>版本号: </span>
                  <el-input
                    v-model="missionList[index].scVersion"
                    auto-complete="off"
                    style="width: 150px;"
                  ></el-input>
                  <span class="tips"
                  >编辑任务后请手动增加版本号，否则可能导致终端脚本无法更新</span
                  >
                </div>
                <div style="margin-top: 18px; display: flex">
                  <span class="upload-title">脚本：</span>
                  <el-upload
                    id="scUpload"
                    :headers="headers"
                    action="http://qk-api.aike.info/qk/upload/app"
                    :show-file-list="true"
                    :before-remove="beforeRemove"
                    :on-success="modScUploadSuccess"
                    :on-exceed="handleExceed"
                    :limit="1"
                    accept=".js"
                  >
                    <el-input
                      style="width: 630px; caret-color: transparent"
                    ></el-input>
                  </el-upload>
                </div>
              </div>
              <div style="border: 1px solid blue;margin-top: 10px;padding-bottom: 10px">
                <div style="margin-top: 10px;color: blue;margin-left: 10px">模拟器</div>
                <div style="margin-top: 20px; ">
                  <span>版本号: </span>
                  <el-input
                    v-model="missionList[index].moScVersion"
                    auto-complete="off"
                    style="width: 150px;"
                  ></el-input>
                  <span class="tips"
                  >编辑任务后请手动增加版本号，否则可能导致终端脚本无法更新</span
                  >
                </div>
                <div style="margin-top: 18px; display: flex">
                  <span class="upload-title">脚本：</span>
                  <el-upload
                    id="scUpload"
                    :headers="headers"
                    action="http://qk-api.aike.info/qk/upload/app"
                    :show-file-list="true"
                    :before-remove="beforeRemove"
                    :on-success="modScUploadSuccessM"
                    :on-exceed="handleExceed"
                    :limit="1"
                    accept=".js"
                  >
                    <el-input
                      style="width: 630px; caret-color: transparent"
                    ></el-input>
                  </el-upload>
                </div>
              </div>
              <div class="controlBtn">
                <el-button class="forbidden-button" @click="deleteMission()"
                  >删除此任务</el-button
                >
                <el-button class="add-button" @click="modifyMission()"
                  >编辑任务</el-button
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div style="padding: 0 20px" v-else>
          当前App暂无任务,请点击右上角新增
        </div>
      </div>
    </el-card>
    <!-- 列表 end -->

    <!-- 弹窗 -->
    <!-- 新增APP start -->
    <el-dialog
      width="40%"
      title="新增APP"
      :visible.sync="addAppDialog"
      center
      :show-close="false"
    >
      <el-form
        ref="addAppForm"
        size="mini"
        style="width:85%; margin: 0 auto"
        :model="addAppForm"
        :rules="addAppFormRules"
      >
        <el-form-item label="APP名称" label-width="85px" prop="appName">
          <el-input
            v-model="addAppForm.appName"
            auto-complete="off"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="上传Logo" label-width="85px" prop="logo">
          <el-upload
            :headers="headers"
            class="logo-uploader"
            action="http://qk-api.aike.info/qk/upload/app"
            :on-success="updateLogoSuccess"
            :before-upload="beforeLogoUpload"
            :show-file-list="false"
          >
            <img v-if="addAppForm.logo" :src="addAppForm.logo" class="logo" />
            <i v-else class="el-icon-plus logo-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="版本号" label-width="85px" prop="version">
          <el-input
            v-model="addAppForm.version"
            auto-complete="off"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item
          id="addAppUploadFile"
          label="上传文件"
          label-width="85px"
          prop="downloadUrl"
        >
          <el-upload
            ref="appUpload"
            class="upload-box"
            :headers="headers"
            action="http://qk-api.aike.info/qk/upload/app"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            :on-remove="removeUpload"
            :on-success="uploadSuccess"
            :limit="1"
            accept=".apk"
          >
            <el-input style="width: 360px; caret-color: transparent"></el-input>
          </el-upload>
        </el-form-item>
        <el-form-item class="add-app-button">
          <el-button style="height: 32px; width: 68px" @click="cancelAddApp()"
            >取消</el-button
          >
          <el-button
            style="height: 32px; width: 68px; background-color: #1074fd; color: #fff"
            @click="addAppSubmit()"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增APP end -->

    <!-- 编辑APP start -->
    <el-dialog
      width="40%"
      title="编辑APP"
      :visible.sync="modifyAppDialog"
      center
      :show-close="false"
    >
      <el-form
        ref="modifyAppForm"
        size="mini"
        style="width:85%; margin: 0 auto"
        :model="modifyAppForm"
        :rules="addAppFormRules"
        status-icon
      >
        <el-form-item label="APP名称" label-width="85px" prop="appName">
          <el-input
            v-model="modifyAppForm.appName"
            auto-complete="off"
            style="width: 150px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          id="logoUploader"
          label="上传Logo"
          label-width="85px"
          prop="logo"
        >
          <div class="logo-uploader">
            <img
              v-if="modifyAppForm.logo"
              :src="modifyAppForm.logo"
              class="logo upd-logo"
            />
            <i v-else class="el-icon-plus logo-uploader-icon"></i>
          </div>
          <el-upload
            :headers="headers"
            style="display: inline-block;"
            action="http://qk-api.aike.info/qk/upload/app"
            :on-success="updateLogoSuccess"
            :before-upload="beforeLogoUpload"
            :show-file-list="false"
          >
            <el-button class="logo-exc-button">替换</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="版本号" label-width="85px" prop="version">
          <el-input
            v-model="modifyAppForm.version"
            auto-complete="off"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item
          id="addAppUploadFile"
          label="上传文件"
          label-width="85px"
          prop="downloadUrl"
        >
          <el-upload
            class="upload-box"
            :headers="headers"
            action="http://qk-api.aike.info/qk/upload/app"
            :show-file-list="true"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            :on-remove="removeUpload"
            :on-success="uploadSuccess"
            :limit="1"
            accept=".apk"
          >
            <el-input style="width: 360px; caret-color: transparent"></el-input>
          </el-upload>
        </el-form-item>
        <el-form-item class="add-app-button">
          <el-button
            style="height: 32px; width: 68px"
            @click="modifyAppDialog = false"
            >取消</el-button
          >
          <el-button
            style="height: 32px; width: 68px; background-color: #1074fd; color: #fff"
            @click="getAppUpd()"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑APP end -->

    <!-- 新增任务 start -->
    <el-dialog
      width="40%"
      title="新增任务"
      :visible.sync="addMissionDialog"
      center
      :show-close="false"
    >
      <el-form
        size="mini"
        style="width:85%; margin: 0 auto"
        :model="addMissionForm"
        :rules="addMissionFormRules"
        ref="addMissionForm"
        status-icon
      >
        <el-form-item label="任务名称" label-width="85px" prop="missionName">
          <el-input
            v-model="addMissionForm.missionName"
            auto-complete="off"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <div style="border: 1px solid red">
          <div style="margin-top: 10px;color: indianred;margin-left: 10px">云手机</div>
          <el-form-item label="版本号" label-width="85px" prop="scriptVersion">
            <el-input
              v-model="addMissionForm.scriptVersion"
              auto-complete="off"
              style="width: 150px"
            ></el-input>
          </el-form-item>
          <el-form-item
            id="addAppUploadFile"
            label="上传脚本"
            label-width="85px"
            prop="scriptUpload"
          >
            <el-upload
              ref="missionUpload"
              class="upload-box"
              :headers="headers"
              action="http://qk-api.aike.info/qk/upload/app"
              :show-file-list="true"
              :before-remove="beforeRemove"
              :on-remove="removeScriptUpload"
              :on-exceed="handleExceed"
              :on-success="scriptUploadSuccess"
              :limit="1"
              accept=".js"
            >
              <el-input style="width: 360px; caret-color: transparent"></el-input>
            </el-upload>
          </el-form-item>
        </div>
        <div style="border: 1px solid blue;margin-top: 10px">
          <div style="margin-top: 10px;color: blue;margin-left: 10px">模拟器</div>
          <el-form-item label="版本号" label-width="85px" prop="moScVersion">
            <el-input
              v-model="addMissionForm.moScVersion"
              auto-complete="off"
              style="width: 150px"
            ></el-input>
          </el-form-item>
          <el-form-item
            id="addAppUploadFile"
            label="上传脚本"
            label-width="85px"
            prop="scriptUpload"
          >
            <el-upload
              ref="missionUpload"
              class="upload-box"
              :headers="headers"
              action="http://qk-api.aike.info/qk/upload/app"
              :show-file-list="true"
              :before-remove="beforeRemove"
              :on-remove="removeScriptUploadM"
              :on-exceed="handleExceed"
              :on-success="scriptUploadSuccessM"
              :limit="1"
              accept=".js"
            >
              <el-input style="width: 360px; caret-color: transparent"></el-input>
            </el-upload>
          </el-form-item>
        </div>
        <el-form-item>
          <div style="color: #1A1A1A; font-size: 14px;">
            所需任务参数
          </div>
          <el-checkbox-group v-model="taskParamsTest">
            <div style="margin-top: 18px;">
              <el-checkbox
                label="选择账号"
                style=" color: #1A1A1A; font-size: 12px;"
              ></el-checkbox>
            </div>
            <div style="margin-top: 18px; ">
              <el-checkbox
                label="选择话术"
                style=" color: #1A1A1A; font-size: 12px;"
              ></el-checkbox>
            </div>
            <div style="margin-top: 18px; ">
              <el-checkbox
                label="输入关键字"
                style=" color: #1A1A1A; font-size: 12px;"
              ></el-checkbox>
            </div>
            <div style="margin-top: 18px; ">
              <el-checkbox
                label="选择通讯录"
                style=" color: #1A1A1A; font-size: 12px;"
              ></el-checkbox>
            </div>
            <div style="margin-top: 18px; ">
              <el-checkbox
                label="设置粉丝数"
                style=" color: #1A1A1A; font-size: 12px;"
              ></el-checkbox>
            </div>
            <div style="margin-top: 18px; ">
              <el-checkbox
                label="直播间参数"
                style=" color: #1A1A1A; font-size: 12px;"
              ></el-checkbox>
            </div>
            <div style="margin-top: 18px; ">
              <el-checkbox
                label="发布"
                style=" color: #1A1A1A; font-size: 12px;"
              ></el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="add-mission-button">
          <el-button
            style="height: 32px; width: 68px"
            @click="cancelMissionAdd()"
            >取消</el-button
          >
          <el-button
            style="height: 32px; width: 68px; background-color: #1074fd; color: #fff"
            @click="addMissionSubmit"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增任务 end -->
  </div>
</template>

<script>
import ModuleTitle from "@/components/content/ModuleTitle.vue";

import { createSign } from "@/utils/sign";
import API from "@/network/api/smsApi";
export default {
  name: "index",
  data() {
    // 匹配上传的安装包扩展名为 .apk
    const validateDownloadUrl = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请上传APP安装包"));
      } else {
        if (value.slice(value.length - 4) === ".apk") {
          callback();
        } else {
          return callback(new Error("请上传正确的APK安装包（扩展名为.apk）"));
        }
      }
    };
    // 匹配上传的安装包扩展名为 .js
    const validateScriptUpload = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请上传脚本文件"));
      } else {
        if (value.slice(value.length - 3) === ".js") {
          callback();
        } else {
          return callback(new Error("请上传正确的脚本文件（扩展名为.js）"));
        }
      }
    };
    const validateLogoPath = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请上传Logo"));
      } else {
        callback();
      }
    };
    return {
      taskParamsTest: [],
      moduleTitle: "APP管理",
      tApp: {}, // 终端参数
      oldVersion: "0.0.0", // 当前选中任务版本号
      versionBtnActive: false, // 判断版本修改的"确认修改"按钮是否可点击
      addAppDialog: false, // 是否打开新增App弹窗
      modifyAppDialog: false, // 是否打开编辑App弹窗
      addMissionDialog: false, // 是否打开新增任务弹窗
      addFileName: "", // 新上传的脚本文件名
      addFileNameM: "",
      taskParams: [], // 任务参数数组
      appList: [], // app列表
      appCheckBox: [], // app列表多选框
      // 列表中当前选中的App
      activeApp: {
        enabled: true
      },
      activeMissionName: "1", // 当前选中的任务 默认为1
      // 任务列表
      missionList: [],
      // 请求头
      headers: {
        session_id: ""
      },
      // 新增APP参数
      addAppForm: {
        appName: "",
        version: "",
        downloadUrl: "",
        logo: ""
      },
      // 新增APP校验规则
      addAppFormRules: {
        appName: [
          {
            required: true,
            message: "请输入APP名称",
            trigger: "blur"
          }
        ],
        version: [
          {
            required: true,
            message: "请输入APP版本号",
            trigger: "blur"
          }
        ],
        downloadUrl: [
          {
            validator: validateDownloadUrl,
            trigger: "blur"
          }
        ],
        logo: [
          {
            validator: validateLogoPath,
            trigger: "blur"
          }
        ]
      },
      // 修改APP参数
      modifyAppForm: {
        appId: 0,
        appName: "",
        version: "",
        downloadUrl: "",
        logo: ""
      },
      // 禁用/启用App参数
      appBanForm: [],

      // 新增任务参数
      addMissionForm: {
        missionName: "", // 任务名称
        moScNameL: "",
        moScVersion: "",
        moScUrl: "",
        scriptVersion: "", // 脚本版本号
        scriptUpload: "", // 脚本地址
        taskParams: [] // 是否需要账号/话术
      },
      // 新增任务校验规则
      addMissionFormRules: {
        missionName: [
          {
            required: true,
            message: "请输入任务名称",
            trigger: "blur"
          }
        ]
      },
      // 查询App列表参数
      appListQueryForm: {
        appId: ""
      },
      appListForm: {
        pageNum: 1, // 页码
        pageSize: 9 // 每页展示条数
      },
      appTotal: 0, // app总数
      listQueryForm: {
        organCode: "",
        type: ""
      },
      // 公共参数
      publicForm: {
        timestamp: ""
      },
      currentItemIndex: 0
    };
  },
  async created() {
    this.currentUserInfo = JSON.parse(localStorage.getItem("updateUserInfo"));
    this.headers.session_id = this.currentUserInfo.token;
    this.getOwnApp();
    await this.getAppList();
    this.appMissionsClick(this.appList[0], 0);
  },
  methods: {
    /**
     * 页面逻辑
     */

    // 修改App当前版本号
    changeCurrentVersion() {
      if (this.versionBtnActive) {
        this.versionBtnActive = false;
        this.modifyAppForm.appId = this.tApp.id;
        this.modifyAppForm.appName = this.tApp.appName;
        this.modifyAppForm.version = this.tApp.version;
        this.getAppUpd();
      }
    },

    // 改变版本修改按钮状态
    currentVersionInputChange() {
      this.versionBtnActive = true;
    },

    // 修改App点击
    modifyBtnClick(item) {
      this.modifyAppForm.appName = item.appName;
      this.modifyAppForm.version = item.version;
      this.modifyAppForm.downloadUrl = item.downloadUrl;
      this.modifyAppForm.appId = item.id;
      this.modifyAppForm.logo = item.logo;
      this.modifyAppDialog = true;
    },

    // 新增APP确认
    addAppSubmit() {
      this.$refs.addAppForm.validate(async vali => {
        if (!vali) return;
        this.getAppAdd();
      });
    },

    // 取消新增App
    cancelAddApp() {
      this.addAppDialog = false;
      this.$refs.addAppForm.resetFields();
      this.$refs.appUpload.clearFiles();
      this.addAppForm.logo = "";
    },

    // 禁用App
    banApp() {
      let s = false;
      for (let i = 0; i < this.appList.length; i++) {
        if (this.appCheckBox[i] === true) {
          this.appBanForm.push(this.appList[i].id);
        }
      }
      if (this.appBanForm.length === 0) {
        this.appBanForm.push(this.activeApp.id);
      }
      this.getAppBan(s);
    },

    // 启用App
    startApp() {
      let s = true;
      for (let i = 0; i < this.appList.length; i++) {
        if (this.appCheckBox[i] === true) {
          this.appBanForm.push(this.appList[i].id);
        }
      }
      if (this.appBanForm.length === 0) {
        this.appBanForm.push(this.activeApp.id);
      }
      this.getAppBan(s);
    },

    // 新增任务
    addMissionSubmit() {
      this.$refs.addMissionForm.validate(async vali => {
        if (!vali) return;
        this.getMissionAdd();
      });
    },

    // 取消新增任务
    cancelMissionAdd() {
      this.addMissionDialog = false;
      this.$refs.missionUpload.clearFiles();
      this.addMissionForm.missionName = this.addMissionForm.scriptVersion = this.addMissionForm.scriptUpload = this.addMissionForm.taskParams = false;
      this.$refs.addMissionForm.resetFields();
      this.taskParamsTest = [];
    },

    // 查询任务信息
    async appMissionsClick(item, index) {
      for (let i = 0; i < this.appBanForm.length; i++) {
        if (this.appBanForm[i] === item.id) return;
        this.appBanForm.push(item.id);
      }
      this.activeMissionName = "1";
      this.activeApp = item;
      this.currentItemIndex = index;
      await this.getMissionInfo();
    },

    // 暂存当前脚本版本号
    isChanging(item) {
      this.oldVersion = this.missionList[parseInt(item.index)].scVersion;
    },

    // 上传文件相关
    handleExceed() {
      this.$message.warning("限制选择1个文件，若要重新上传，请先删除");
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    removeUpload() {
      this.addAppForm.downloadUrl = "";
      this.modifyAppForm.downloadUrl = "";
    },
    removeScriptUpload() {
      this.addMissionForm.scriptUpload = "";
    },
    removeScriptUploadM() {
      this.addMissionForm.moScUrl = "";
    },
    uploadSuccess(res, file) {
      if (res.code === 0) {
        this.addAppForm.downloadUrl = res.data;
        this.modifyAppForm.downloadUrl = res.data;
      }
    },
    scriptUploadSuccess(res, file) {
      this.addFileName = file.name;
      if (res.code === 0) {
        this.addMissionForm.scriptUpload = res.data;
      }
    },
    scriptUploadSuccessM(res, file) {
      this.addFileNameM = file.name;
      if (res.code === 0) {
        this.addMissionForm.moScUrl = res.data;
      }
    },
    modScUploadSuccess(res, file) {
      this.missionList[this.activeMissionName - 1].scName = file.name;
      if (res.code === 0) {
        this.missionList[this.activeMissionName - 1].scUrl = res.data;
      }
    },
    modScUploadSuccessM(res, file) {
      this.missionList[this.activeMissionName - 1].moScName = file.name;
      if (res.code === 0) {
        this.missionList[this.activeMissionName - 1].moScUrl = res.data;
      }
    },
    updateLogoSuccess(res, file) {
      if (res.code === 0) {
        this.addAppForm.logo = res.data;
        this.modifyAppForm.logo = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    beforeLogoUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 分页
    paginationPrevClick(page) {
      this.appListForm.pageNum = page;
      this.getAppList();
      this.appMissionsClick(this.appList[0], 0);
    },
    paginationNextClick(page) {
      this.appListForm.pageNum = page;
      this.getAppList();
      this.appMissionsClick(this.appList[0], 0);
    },
    paginationNextChange(page) {
      this.appListForm.pageNum = page;
      this.getAppList();
      this.appMissionsClick(this.appList[0], 0);
    },

    /**
     * 网络请求
     */

    // 查询自己App
    async getOwnApp() {
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(JSON.stringify({ ...this.publicForm }));
      await API.getOwnApp({ ...this.publicForm }).then(res => {
        if (res.data.code === 0) {
          this.tApp = res.data.data;
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },

    // 新增App
    async getAppAdd() {
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.publicForm,
          ...this.addAppForm
        })
      );
      await API.getAppAdd({
        ...this.addAppForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          this.$message.success("新增成功");
          this.addAppDialog = false;
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
      this.getAppList();
      this.$refs.addAppForm.resetFields();
      this.$refs.appUpload.clearFiles();
      this.removeUpload();
    },

    // 修改App
    async getAppUpd() {
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.publicForm,
          ...this.modifyAppForm
        })
      );
      await API.getAppUpd({
        ...this.modifyAppForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          this.$message.success("修改成功");
          this.modifyAppDialog = false;
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
      this.getAppList();
      this.removeUpload();
    },

    // 禁用/启用App
    async getAppBan(stat) {
      let enabled = stat;
      let appIds = this.appBanForm;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          enabled,
          ...this.publicForm,
          appIds
        })
      );
      await API.getAppBan({
        enabled,
        ...this.publicForm,
        appIds
      }).then(res => {
        if (res.data.code === 0) {
          if (enabled) {
            this.$message.success("启用成功");
          } else {
            this.$message.success("禁用成功");
          }
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
      this.appBanForm = [];
      this.getAppList();
      this.activeApp.enabled = !this.activeApp.enabled;
    },

    // 查询App列表
    async getAppList() {
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.appListForm,
          ...this.publicForm
        })
      );
      await API.getAppQuery({
        ...this.appListForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          if (res.data.data.records.length !== 0) {
            this.appTotal = res.data.data.total;
            this.appList = res.data.data.records;
            this.appMissionsClick(this.appList[0], 0);
          } else {
            this.appTotal = 0;
            this.appList.length = 0;
          }
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },

    // 查询任务详情
    async getMissionInfo() {
      let appId = this.activeApp.id;
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.publicForm,
          appId
        })
      );
      await API.getTaskQuery({
        ...this.publicForm,
        appId
      }).then(res => {
        if (res.data.code === 0) {
          this.missionList = res.data.data;
          this.oldVersion = res.data.data[0].scVersion;
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },

    // 新增任务
    async getMissionAdd() {
      let addParams = {};
      addParams.isAccount = false;
      addParams.isWords = false;
      addParams.isKeyword = false;
      addParams.searchAccount = false;
      addParams.isMail = false;
      addParams.isPublish = false;
      addParams.appId = this.activeApp.id;
      addParams.taskName = this.addMissionForm.missionName;
      addParams.scName = this.addFileName;
      addParams.scUrl = this.addMissionForm.scriptUpload;
      addParams.scVersion = this.addMissionForm.scriptVersion;
      addParams.moScName = this.addFileNameM;
      addParams.moScUrl = this.addMissionForm.moScUrl;
      addParams.moScVersion = this.addMissionForm.moScVersion;
      this.addMissionForm.taskParams = this.taskParamsTest;
      for (let i = 0; i < this.addMissionForm.taskParams.length; i++) {
        if (this.addMissionForm.taskParams[i] === "选择账号")
          addParams.isAccount = true;
        if (this.addMissionForm.taskParams[i] === "选择话术")
          addParams.isWords = true;
        if (this.addMissionForm.taskParams[i] === "输入关键字")
          addParams.isKeyword = true;
        if (this.addMissionForm.taskParams[i] === "选择通讯录")
          addParams.isMail = true;
        if (this.addMissionForm.taskParams[i] === "设置粉丝数")
          addParams.searchAccount = true;
        if (this.addMissionForm.taskParams[i] === "直播间参数")
          addParams.liveForm = true;
        if (this.addMissionForm.taskParams[i] === "发布")
          addParams.isPublish = true;
      }
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      console.log(JSON.stringify({
        ...addParams,
        ...this.publicForm
      }))
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...addParams,
          ...this.publicForm
        })
      );
      await API.getTaskAdd({
        ...addParams,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          this.$message.success("新增成功");
          this.addAppDialog = false;
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
      this.addMissionDialog = false;
      this.getMissionInfo();
      this.$refs.addMissionForm.resetFields();
      this.$refs.missionUpload.clearFiles();
      this.removeScriptUpload();
    },

    // 修改任务
    async modifyMission() {
      let modForm = {};
      let sisForm = this.missionList[this.activeMissionName - 1];
      let oldVersionList = this.oldVersion.split(".");
      let oldLevel = 0;
      let newVersionList = sisForm.scVersion.split(".");
      let newLevel = 0;
      for (let i = 0; i < oldVersionList.length; i++) {
        oldLevel +=
          oldVersionList[i] * Math.pow(10, oldVersionList.length - i - 1);
        newLevel +=
          newVersionList[i] * Math.pow(10, oldVersionList.length - i - 1);
      }
      modForm.id = sisForm.id;
      modForm.taskName = sisForm.taskName;
      modForm.scName = sisForm.scName;
      modForm.scUrl = sisForm.scUrl;
      modForm.scVersion = sisForm.scVersion;
      modForm.moScName = sisForm.moScName;
      modForm.moScUrl = sisForm.moScUrl;
      modForm.moScVersion = sisForm.moScVersion;
      modForm.isAccount = sisForm.isAccount;
      modForm.isWords = sisForm.isWords;
      modForm.isKeyword = sisForm.isKeyword;
      modForm.isMail = sisForm.isMail;
      modForm.searchAccount = sisForm.searchAccount;
      modForm.isPublish = sisForm.isPublish
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.publicForm,
          ...modForm
        })
      );
      await API.getTaskUpd({
        ...this.publicForm,
        ...modForm
      }).then(res => {
        if (res.data.code === 0) {
          this.$message.success("修改成功");
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
      this.getMissionInfo();
      this.removeScriptUpload();
      // if (newLevel > oldLevel) {
      //
      // } else {
      //   this.$message.warning("请调整当前任务版本号");
      // }
    },

    // 删除任务
    async deleteMission() {
      let delForm = {};
      delForm.deleted = true;
      delForm.id = this.missionList[this.activeMissionName - 1].id;
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...delForm,
          ...this.publicForm
        })
      );
      await API.getTaskUpd({
        ...delForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          this.$message.success("删除成功");
        } else {
          this.$message({
            type: "warning",
            message: "删除失败"
          });
        }
      });
      this.getMissionInfo();
      this.activeMissionName = "1";
    }
  },
  components: {
    ModuleTitle
  }
};
</script>

<style scoped>
.card-title {
  color: #1074fd;
  font-size: 18px;
  margin-bottom: 14px;
}

/* 版本控制 */
.app-version {
  color: #1a1a1a;
  font-size: 18px;
}
.version-input {
  width: 225px;
  height: 44px;
  margin-left: 10px;
  margin-right: 30px;
}
/deep/ #version-control .el-input__inner {
  color: #1074fd;
  font-size: 14px;
}
.version-button-active,
.version-button {
  width: 100px;
  height: 40px;
  padding: 0;
  border-width: 0;
  background-color: #ccc;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px;
}
.version-button-active {
  background-color: #1074fd;
}

/* 列表 */
.app_list {
  display: inline-block;
  width: calc(35% + 10px);
  height: 850px;
  margin: 20px 10px 20px 0;
  vertical-align: top;
  border: 1px #bbb solid;
  border-radius: 5px;
  position: relative;
}
.title_detail {
  height: 10%;
  padding: 0 20px;
  margin: 0 0 20px 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #d9d9d9;
  border-bottom: 1px #bbb solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list {
  height: 100px;
  padding: 0px 20px 30px 20px !important;
  overflow: hidden;
  margin: 0 !important;
}
.list li {
  display: flex;
  padding: 8px;
  margin-bottom: 5px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.title {
  display: block;
  margin: 5px;
  font-weight: 700;
}
.title1 {
  display: block;
  margin: 5px;
  font-size: 10px;
}
.checkBox {
  margin: auto;
  margin-right: 14px;
}
.current {
  border-radius: 4px;
  background: #1074fd;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
}
/deep/ .el-checkbox__inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
/deep/ .el-checkbox__inner::after {
  height: 11px;
  left: 7px;
}
/deep/ #modifyIcon .el-icon-edit:before {
  width: 16px;
  height: 16px;
  color: #1074fd;
  font-weight: 700;
}
/deep/ #currentModifyIcon .el-icon-edit:before {
  width: 16px;
  height: 16px;
  color: #fff;
  font-weight: 700;
}
.add-button {
  background-color: #1074fd;
  color: #ffffff;
  border: 1px solid #1074fd;
}
.forbidden-button {
  background-color: transparent;
  color: #ff7765;
  border: 1px solid #ff7765;
}
.able-button {
  background-color: transparent;
  color: #1074fd;
  border: 1px solid #1074fd;
}

/* 任务内容 */
.mission-content {
  display: inline-block;
  width: 60%;
  height: 850px;
  margin: 20px 0 20px 10px;
  border: 1px #bbb solid;
  border-radius: 10px;
}
.upload-title {
  color: #1a1a1a;
  margin-top: 8px;
  margin-left: 9px;
}
.upload-box {
  width: 90%;
  height: 30px;
}
/deep/ .upload-box .el-upload-list {
  padding: 0 10px;
}
/deep/ .upload-box .el-upload-list__item:first-child {
  margin-top: -26px;
}
/deep/ #scUpload .el-upload-list__item:first-child {
  width: 610px;
  margin-top: -32px;
  margin-left: 10px;
}

.controlBtn {
  margin-top: 40px;
  text-align: right;
}

.tips {
  margin-left: 15px;
  font-size: 14px;
  color: #999;
}

.tips::before {
  content: "!";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #666;
  color: #fff;
  text-align: center;
  line-height: 15px;
}

/* 新增APP */
.add-app-button {
  margin-top: 100px;
  text-align: right;
}

.logo-uploader {
  display: inline-block;
}
.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
/deep/ .logo-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.logo-uploader .el-upload:hover {
  border-color: #409eff;
}
.logo {
  width: 60px;
  height: 60px;
  display: block;
}
.logo-exc-button {
  margin-left: 5px;
  margin-bottom: 10px;
  padding: 3px 7px;
  vertical-align: middle;
  background-color: #1074fd;
  color: #fff;
  font-weight: bold;
}
.upd-logo {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

/* 新增任务 */
.add-mission-button {
  margin-top: 50px;
  text-align: right;
}
</style>
